<!-- 图标文本显示组件 -->
<template>
	<view class="icon-text" :class="{'act':isAct}" @click="onClick">
		<view v-if="iconType=='font'" class="font-icon" >
			<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
			<view class="icon iconfont nol" :class="iconNol" :style="{'font-size':iconSize+'rpx','margin-bottom':iconMarginBottom+'rpx'}"></view>
			<view class="icon iconfont hor" :class="iconHor" :style="{'font-size':iconSize+'rpx','margin-bottom':iconMarginBottom+'rpx'}"></view>
		</view>

		<view v-if="iconType=='img'" class="img-icon">
			<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
			<image class="icon nol" :src="iconNol" :style="{'width':iconSize+'rpx','height':iconSize+'rpx','margin-bottom':iconMarginBottom+'rpx'}"></image>
			<image class="icon hor" :src="iconHor" :style="{'width':iconSize+'rpx','height':iconSize+'rpx','margin-bottom':iconMarginBottom+'rpx'}"></image>
		</view>
		<text class="text" :style="{'font-size':nameSize+'rpx','color':nameColor}">{{name}}</text>
	</view>
</template>

<script>
	import uniBadge from "../uni-badge/uni-badge.vue"
	export default {
		components:{
			uniBadge
		},
		props: {
			iconType: { // icon图标类型
				type: String, // img:图片类型 font:字体图标类型
				default: "img"
			},
			iconNol: { //常态图标地址 或 文字图标类名
				type: String,
				default: "../../static/load_error.jpeg"
			},
			iconHor: { //高亮图标 或 文字图标类名
				type: String,
				default: "../../static/load_error.jpeg"
			},
			iconSize:{
				// 图标大小
				type:Number,
				default: 20
			},
			iconMarginBottom:{
				// 图标底部外边距
				type:Number,
				default: 20
			},
			isAct: { //是否是当前高亮
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: "未定义"
			},
			nameSize:{ //名字大小
				type: Number,
				default:30 
			},
			nameColor:{ //名字颜色
				type: String,
				default: "#333333"
			},
			badgeNum:{
			    type: Number,
			    default: 0	
			}

		},

		data() {
			return {

			};
		},
		methods:{
			onClick(){
				this.$emit("click")
			}
		},
		mounted() {
			console.log("iconType", this.$props.iconType)
		}
	}
</script>

<style lang="scss" scoped>
	.icon-text {
		// width: 100%;
		// flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 15rpx 15rpx;

		.font-icon,
		.img-icon {
			// width: 120rpx;
			// height: 120rpx;
			// background-color: #ddd;
			// border-radius: 50%;
			margin-bottom: 10rpx;
			// line-height: 120rpx;
			position: relative;
			
			.badge{
				position: absolute;
				right: -30rpx;
				top: -24rpx;
			}

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #FFFFFF;
				font-size: 50rpx;
			}

			.nol {
				display: flex;
			}

			.hor {
				display: none;
			}
		}

		.text {
			color: #333333;
			font-size: 30rpx;
		}

	}

	// .icon-text:hover,
	.icon-text.act {

		.font-icon,
		.img-icon {
			.nol {
				display: none;
			}

			.hor {
				display: flex;
			}
		}

		.text {}

	}
</style>
